<template>
  <el-dialog
    title="刀板管理"
    :visible.sync="dialog.show"
    width="500px"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini" :inline="true">
      <el-form-item label="编码:" prop="code">
        <el-input v-model="form.code" style="width:300px" />
      </el-form-item>
      <el-form-item label="名称:" prop="name">
        <el-input v-model="form.name" style="width:300px" />
      </el-form-item>
      <!-- <el-form-item label="订单分类:" label-width="80px">
        <el-select v-model="form.orderType">
          <el-option label="外箱" value="外箱" />
          <el-option label="彩盒" value="彩盒" />
        </el-select>
      </el-form-item>-->
      <el-form-item label="图片:">
        <el-upload
          class="avatar-uploader"
          :action="upLoadURL"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item><br>
      <el-form-item label="适用规格:">
        <el-input v-model="form.specification1" style="width:100px" />
      </el-form-item>
      <span style="margin:0px 0px 0px -10px">*</span>
      <el-form-item>
        <el-input v-model="form.specification2" style="width:100px" />
      </el-form-item>
      <el-form-item label="入库日期:">
        <el-date-picker v-model="form.date" type="date" style="width:300px" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="单价:">
        <el-input v-model="form.per" style="width:300px" />
      </el-form-item>
      <el-form-item label="备注:">
        <el-input v-model="form.note" style="width:300px" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialog.show = false">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addOrUpdate, getKnife } from '@/api/basedata/knife'
export default {
  props: {
    dialog: {
      type: Object,
      default: () => {}
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      upLoadURL: this.baseURL + '/file/upload',
      imageUrl: '',
      form: {
        img: ''
      },
      rules: {
        code: [
          { required: true, message: '请输入编码', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    'dialog.show': function(val) {
      if (val) {
        console.log(this.id)
        if (this.id !== '' && this.id !== null) {
          getKnife(this.id).then(res => {
            this.form = res
            if (res.pic !== null) {
              this.imageUrl = this.baseURL + res.pic
            } else {
              this.imageUrl = ''
            }
          })
          // 编辑
        } else {
          // 新增
          this.form = Object.assign({}, this.$options.data().form)
          // this.$refs.form.resetFields()
        }
      }
    }
  },
  methods: {
    sure() {
      this.$refs.form.validate(x => {
        if (x) {
          var data = this.form
          addOrUpdate(data).then(res => {
            if (res) {
              this.$message.success('保存成功')
            }
            this.$emit('init')
            this.dialog.show = false
          })
        }
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.pic = res
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    }
  }
}
</script>

<style scoped>
  .avatar-uploader {
    border: 1px dashed #c9c5c5;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px;
    height: 98px;
    line-height: 98px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
